<template>
  <a-layout class="home-layout">
    <a-layout-content :style="{
      minHeight: this.aLayoutContentStyle.style.minHeight + 'px'
    }">
      <div class='search-bg-img'>
        <div class="home-layout-menu">
          <global-header/>
          <home-title
              mode="horizontal"
              :select-key="selectKeys"
              :menu-list="menuList"
              @menuClick="($event) => this.getMenu($event)"
          />
        </div>
        <global-search
            :placeholder="'请输入关键字'"
            :customValue="customValue"
            :searchMenu="menuList"
            @searchSelectOnchange="($event) => searchSelectOnchange($event)"
        />
      </div>
      <a-layout-content class='home-layout-content'>
        <template v-if="menuList.length > 0">
          <render-provide
              :value="{
                  returnTimelineItem,
                  componentChildren: componentObject
              }"
          >
            <injection-router-view/>
          </render-provide>
        </template>
        <template v-else>
          <div class="global-not-found"/>
        </template>
      </a-layout-content>
    </a-layout-content>
    <Customer/>
  </a-layout>
</template>

<script>
import {GlobalHeader, GlobalSearch} from '@/components';
import HomeTitle from './components/HomeTitleBar';
import {getLocalStorage} from "@/utils/localstore";
import {getFirstMenu, getMenuList} from "@/api/menu/menu";
import _ from 'lodash';
import {Message} from 'ant-design-vue';
import {windowOpenBusiness} from "@/utils";
import InjectionRouterView from "@/utils/InjectionRouterView";
import Customer from "@/components/customerService/Customer";

export default {
  name: "Home",
  components: {
    GlobalHeader,
    HomeTitle,
    GlobalSearch,
    InjectionRouterView,
    Customer
  },
  data() {
    return {
      aLayoutContentStyle: {
        style: {}
      },
      selectKeys: [],
      selectValue: 0,
      customValue: '',
      componentObject: {},
      menuList: [],
      componentChildren: {}
    }
  },
  async created() {
    this.$store.dispatch('getServerBg/getFiles');
    await this.getMenuList();
  },
  mounted() {
    this.$nextTick(() => {
      const bodyHeight = document.body.clientHeight;
      this.aLayoutContentStyle.style.minHeight = bodyHeight - 270;
    })
  },
  methods: {
    async getMenuList() {
      const menuProp = {
        roleId: getLocalStorage('roleId'),
        state: 4
      }
      getMenuList({
        ...menuProp
      }).then(async res => {
        const {success, message} = res
        let {data} = res
        if (success) {
          const dataChildrenAll = data.some(item => 
            item.component.toLowerCase() === 'portal'
          )
          if (dataChildrenAll) {
            //财政门户需要调接口
            const firstMenu = await getFirstMenu({
              ...menuProp,
              url: window.location.hostname,
              userId: getLocalStorage('userId'),
              enabled: 1
            })
            const {success} = firstMenu
            if (success) {
              data = data.map(item => {
                // 不能根据index来判断
                // if (index === 0) {
                //   item.children = firstMenu.data
                // }
                if (item.component.toLowerCase() === 'portal') {
                  item.children = firstMenu.data
                }
                return item
              })
              this.menuList = data;
              this.componentObject = _.cloneDeep(this.menuList.find(item => this.$route.path === item.path));
            }
          } else {
            this.menuList = data;
            this.componentObject = _.cloneDeep(this.menuList.find(item => this.$route.path === item.path));
          }
        } else {
          Message.warning({
            content: message,
            duration: 0
          });
        }
        // if (success && data[0] && data[0].children) {
        //   this.menuList = data;
        //   this.componentObject = _.cloneDeep(this.menuList.find(item => this.$route.path === item.path));
        // } else if (success && data[0] && !data[0].children){
        //     const firstMenu = await getFirstMenu({
        //     ...menuProp,
        //     url: window.location.hostname,
        //     userId: getLocalStorage('userId'),
        //     enabled: 1
        //   })
        //   const {success} = firstMenu
        //   if (success) {
        //     data = data.map((item, index) => {
        //       if (index === 0) {
        //         item.children = firstMenu.data
        //       }
        //       return item
        //     })
        //     this.menuList = data;
        //     this.componentObject = _.cloneDeep(this.menuList.find(item => this.$route.path === item.path));
        //   }
        // } else {
        //   Message.warning({
        //     content: message,
        //     duration: 0
        //   });
        // }
      })
    },

    async returnTimelineItem(timeItem) {
      await windowOpenBusiness(timeItem, 2);
    },

    searchSelectOnchange(value) {
      const {label, key} = value ? value : {label: '', key: undefined};
      this.selectValue = key;
      let menuPath = ''
      const routerEvent = (routerPath) => {
        menuPath = label === '' ? this.$route.path : routerPath;
        this.$router.push(menuPath)
      }
      for (const cloneMenu of _.cloneDeep(this.menuList)) {
        let name = '';
        if (cloneMenu.children && cloneMenu.children.length) {
          for (const cloneMenuChildren of cloneMenu.children) {
            if (cloneMenuChildren.data) {
              cloneMenuChildren.data = cloneMenuChildren.data.filter((dataFilter) => {
                if (dataFilter.name.indexOf(label) > -1) {
                  name = label;
                  routerEvent(cloneMenu.path)
                  return dataFilter
                }
              });
            } else if (cloneMenuChildren.children) {
              cloneMenuChildren.children = cloneMenuChildren.children.filter((dataFilter) => {
                if (dataFilter.title.indexOf(label) > -1) {
                  name = label;
                  routerEvent(cloneMenu.path)
                  return dataFilter
                }
              })
            }
          }
        }
        if (name !== '') {
          this.componentObject = cloneMenu
          break;
        } else {
          if (cloneMenu.path === menuPath) {
            this.componentObject = cloneMenu
          }
        }
      }
    },

    getMenu(key) {
      window.dispatchEvent(new Event('CleanSearchInput'));
      this.componentObject = this.menuList.find(item => item.id === Number(key));
      this.customValue = '';
      this.$router.push({
        path: this.componentObject.path
      });
    }
  }
}
</script>

<style scoped lang="less">
.home-layout {
  .search-bg-img {
    height: 192px;
    background-color: #ccc;
    background-size: 100% 192px;
    background-image: url('~@/assets/images/home/FinancialSearch.png');
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: wrap;
  }

  .home-layout-menu {
    display: flex;
    height: 92px;
    width: 100%;
    padding: 0 15%;
    background-color: rgba(255, 255, 255, 0.3);
    align-items: center;

    .global-header {
      width: 40%;
    }

    .ant-menu {
      display: flex;
      align-items: center;
      width: 60%;
      border-bottom: none;
      justify-content: flex-end;
      background-color: rgba(255, 0, 0, 0);
    }
  }

  .home-layout-content {
    width: 100%;
    padding: 20px calc(100% - 85%) 20px;
    background: #e6f7ff;
    min-height: 63vh;
  }
}
</style>
